<style type="text/css">
    .pagination_view {
        float: right;
        display: flex;
        flex-direction: row;
        color: #696969;
        font-size: 10pt;
        padding-bottom: 120pt;
    }

    .pagination_info {
        border-radius: 3pt;
        margin-right: 4pt;
    }

    .pagination_button {
        width: auto;
        padding: 4pt;
        border: 1px solid #eaeded;
        background-color: white;
        outline: none;
    }

    .pagination_button:hover {
        background-color: #ffdd94;
        border-color: #ffdd94;
    }

    .pagination_disable {
        color: #bbbbbb;
    }

    .pagination_disable:hover {
        background-color: white;
        border-color: #eaeded;
        color: #bbbbbb;
    }


    .pagination_num {
        border-left: none;
        border-right: none;
        min-width: 24pt;
    }

    .pagination_pre {
        border-right: none;
        border-top-left-radius: 3pt;
        border-bottom-left-radius: 3pt;
    }

    .pagination_next {
        border-left: none;
        border-top-right-radius: 3pt;
        border-bottom-right-radius: 3pt;
    }

    .pagination_num_select {
        background-color: #ff851b;
        color: white;
        border: none;
    }

    .pagination_num_select:hover {
        background-color: #ff851b;
        color: white;
        border: none;
    }


</style>

<div id="pagination_view" class="pagination_view">
    <button class="pagination_button pagination_info pagination_disable"> 共{{ total }}条
    </button>
    <button v-if="cur === 1" class="pagination_button pagination_pre pagination_disable" @click="clickPre()">上一页
    </button>
    <button v-else class="pagination_button pagination_pre" @click="clickPre()">上一页</button>
    <button v-if="showHomeBtn" class="pagination_button pagination_num" @click="clickNum(1)">首页</button>
    <button v-for="p in nums" v-if="p === cur" class="pagination_button pagination_num pagination_num_select"
            @click="clickNum(p)">{{p}}
    </button>
    <button v-else class="pagination_button pagination_num"
            @click="clickNum(p)">{{p}}
    </button>
    <button v-if="cur === pageCount" class="pagination_button pagination_next pagination_disable" @click="clickNext()">下一页
    </button>
    <button v-else class="pagination_button pagination_next" @click="clickNext()">下一页</button>
</div>

<script type="text/javascript">
    window.paginationVue = new Vue({
        el: '#pagination_view',
        data: {
            cur: 1,
            total: 100,
            pageCount: 6,
            nums: [],
            showCount: 9,
            showHomeBtn: false,
        },
        methods: {
            setTotal: function(total) {
                this.total = total;
            },
            setPageCount: function (t) {
                this.pageCount = t;
            },
            clickNum: function (n) {
                if (n === '...') {
                    let tmp = [];
                    let from = this.nums[0];
                    if (from === 1 && this.nums[1] === '...') {
                        for (let i = 0; i < this.showCount; i++) {
                            tmp.push(i + 1);
                        }
                        tmp.push('...');
                        tmp.push(this.pageCount);
                    } else if (from + this.showCount * 2 < this.pageCount) {
                        for (let i = 0; i < this.showCount; i++) {
                            tmp.push(i + from + this.showCount);
                        }
                        tmp.push('...');
                        tmp.push(this.pageCount);
                    } else {
                        tmp.push(1);
                        tmp.push('...');
                        for (let i = this.pageCount - this.showCount; i < this.pageCount; i++) {
                            tmp.push(i + 1);
                        }
                    }
                    this.nums = tmp;
                } else {
                    this.cur = n;
                    let tmp = [];
                    let from = this.cur - Math.floor(this.showCount / 2);
                    if (from < 1) {
                        from = 1;
                    }
                    if (this.showCount + from < this.pageCount) {
                        for (let i = from; i < from + this.showCount; i++) {
                            tmp.push(i);
                        }
                        if (this.pageCount > this.showCount + 1) {
                            tmp.push('...');
                        }
                        tmp.push(this.pageCount);
                    } else {
                        if (this.pageCount <= this.showCount + 1) {
                            for (let i = 1; i <= this.pageCount; i++) {
                                tmp.push(i);
                            }
                        } else {
                            tmp.push(1);
                            tmp.push('...');
                            for (let i = this.pageCount - this.showCount + 1; i <= this.pageCount; i++) {
                                tmp.push(i);
                            }
                        }
                    }
                    this.nums = tmp;
                }
                if (this.nums[0] === 1) {
                    this.showHomeBtn = false;
                }
                else {
                    this.showHomeBtn = true;
                }
            },
            clickPre: function () {
                if (this.cur > 1) {
                    this.cur -= 1;
                    this.clickNum(this.cur);
                }
            },
            clickNext: function () {
                if (this.cur < this.pageCount) {
                    this.cur += 1;
                    this.clickNum(this.cur);
                }
            },
            onPageValueChanged: function (page) {
                log('onPageValueChanged: ' + page);
            },
        },
        watch: {
            pageCount: function (newV) {
                if (newV <= 0) {
                    this.pageCount = 1;
                    return;
                }
                this.cur = 1;
                let tmp = [];
                let c = newV;
                if (c > this.showCount + 1) {
                    c = this.showCount;
                }
                for (let i = 0; i < c; i++) {
                    tmp.push(i + 1);
                }
                if (c < newV) {
                    tmp.push('...');
                    tmp.push(newV);
                }
                this.nums = tmp;
            },
            cur: function (newV) {
                this.onPageValueChanged(newV);
            }
        },
        mounted: function () {
            window.paginationVue = this;
            this.setPageCount(0);
            if (window.pagination_view) {
                window.pagination_view(200);
            }
        },
    });
</script>
